<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
</head>
<body>

<h2>Input Recorder</h2>
<p>Records input events and logs them in the console</p>

<button id="start">Start</button>
<button id="stop">Stop</button><br/><br/>
<textarea rows="20" cols="50" id="input"></textarea>

<script>
var interestingEvents = [
	'keydown',
	'keyup',
	'keypress',
	'compositionstart',
	'compositionupdate',
	'compositionend',
	'input',
	'cut',
	'copy',
	'paste',
];

var RECORDED_EVENTS = [];

var input = document.getElementById('input');

var blockedProperties = [
	'currentTarget',
	'path',
	'srcElement',
	'target',
	'view'
];
blockedProperties = blockedProperties.concat([
	'AT_TARGET',
	'BLUR',
	'BUBBLING_PHASE',
	'CAPTURING_PHASE',
	'CHANGE',
	'CLICK',
	'DBLCLICK',
	'DOM_KEY_LOCATION_LEFT',
	'DOM_KEY_LOCATION_NUMPAD',
	'DOM_KEY_LOCATION_RIGHT',
	'DOM_KEY_LOCATION_STANDARD',
	'DRAGDROP',
	'FOCUS',
	'KEYDOWN',
	'KEYPRESS',
	'KEYUP',
	'MOUSEDOWN',
	'MOUSEDRAG',
	'MOUSEMOVE',
	'MOUSEOUT',
	'MOUSEOVER',
	'MOUSEUP',
	'NONE',
	'SELECT'
])

function toSerializable(e) {
	var r = {};
	for (var k in e) {
		if (blockedProperties.indexOf(k) >= 0) {
			continue;
		}
		if (typeof e[k] === 'function') {
			continue;
		}
		r[k] = e[k];
	}
	console.log(r);
	return r;
}

function recordEvent(eventType, e) {
	RECORDED_EVENTS.push({
		type: eventType,
		textarea: {
			value: input.value,
			selectionStart: input.selectionStart,
			selectionEnd: input.selectionEnd
		},
		event: toSerializable(e)
	});
}

interestingEvents.forEach(function(eventType) {
	input.addEventListener(eventType, function(e) {
		recordEvent(eventType, e);

	});
});

document.getElementById('start').onclick = function() {
	input.value = 'some  text';
	input.setSelectionRange(5, 5);
	input.focus();
	RECORDED_EVENTS = [];
};

document.getElementById('stop').onclick = function() {
	console.log(JSON.stringify(RECORDED_EVENTS));
};

</script>
</body>
</html>
